<template>
  <div>
    <div class="box" id="tihuoContent">
      <div
        class="flex justify_center"
        style="font-size: 16px; font-weight: 600"
      >
        四川威斯腾物流有限公司
      </div>
      <div
        class="flex justify_center"
        style="font-size: 16px; font-weight: 600; margin-bottom: 24px"
      >
        提货签收单
      </div>
      <div class="flex justify_between" style="margin-bottom: 10px">
        <div>提货人名称：</div>
        <div>提货人身份证：</div>
        <div>2024-10-27 16:45:23</div>
      </div>
      <div class="flex justify_between" style="margin-bottom: 10px">
        <div>收货人身份证：</div>
        <div>
          {{ props.row.transport_type == 1 ? "集装箱号：" : "车厢号：" }}
          {{
            props.row.transport_type == 1 ? props.row.boxs : props.row.car_nos
          }}
        </div>
      </div>
      <div class="border" style="margin-bottom: 10px">
        <div class="flex">
          <div class="padd12 bor_r bor_b center" style="width: 100px">
            <div>运单号</div>
          </div>
          <div class="padd12 bor_r bor_b center" style="width: 100px">
            <div>品名</div>
          </div>
          <div class="padd12 bor_r bor_b center" style="width: 80px">
            <div>件数</div>
          </div>
          <div class="padd12 bor_r bor_b center" style="width: 100px">
            <div>重量</div>
          </div>
          <div class="padd12 bor_r bor_b center" style="width: 80px">
            <div>体积</div>
          </div>
          <div class="padd12 bor_r bor_b center" style="width: 200px">
            <div>收货人</div>
          </div>
          <div class="padd12 bor_b center flex_1">
            <div>库区库位</div>
          </div>
        </div>
        <div
          class="flex"
          v-for="(item, index) in props.row.detail"
          :key="index"
        >
          <div
            class="padd12 bor_r bor_b center"
            style="width: 100px; min-height: 32px; word-break: break-all"
          >
            <div>{{ props.row.order_no }}</div>
          </div>
          <div class="padd12 bor_r bor_b center" style="width: 100px">
            <div>{{ item.prediction.goods_name }}</div>
          </div>
          <div class="padd12 bor_r bor_b center" style="width: 80px">
            <div>{{ item.pick_number }}</div>
          </div>
          <div class="padd12 bor_r bor_b center" style="width: 100px">
            <div>{{ item.pick_weight }}</div>
          </div>
          <div class="padd12 bor_r bor_b center" style="width: 80px">
            <div></div>
          </div>
          <div class="padd12 bor_r bor_b center" style="width: 200px">
            <div>{{ props.row.dept.name }}</div>
          </div>

          <div class="padd12 bor_b center flex_1">
            <div>
              {{
                item.prediction.warehouse_log_chu == null
                  ? ""
                  : item.prediction.warehouse_log_chu.warehouse.name +
                    "/" +
                    item.prediction.warehouse_log_chu.horizontal_position +
                    "-" +
                    item.prediction.warehouse_log_chu.release_position +
                    "-" +
                    item.prediction.warehouse_log_chu.reaches_position
              }}
            </div>
          </div>
        </div>
        <div class="flex">
          <div class="padd12 bor_r bor_b center" style="width: 100px">
            <div>备注</div>
          </div>
          <div class="padd12 bor_b center flex_1">
            <div></div>
          </div>
        </div>
        <div class="flex">
          <div class="padd12 bor_r bor_b center" style="width: 100px">
            <div>提货车厢号</div>
          </div>
          <div class="padd12 bor_r bor_b center" style="width: 100px">
            <div></div>
          </div>
          <div class="padd12 bor_r bor_b center" style="width: 180px">
            <div>提货时间</div>
          </div>

          <div class="padd12 bor_r bor_b center" style="width: 80px">
            <div>装卸班组</div>
          </div>
          <div class="padd12 bor_r bor_b center" style="width: 200px">
            <div></div>
          </div>
          <div class="padd12 bor_b center flex_1">
            <div>操作员</div>
          </div>
        </div>
        <div class="flex">
          <div class="padd12 bor_r center" style="width: 100px">
            <div>{{ props.row.transport_numbers }}</div>
          </div>
          <div class="padd12 bor_r center" style="width: 100px">
            <div></div>
          </div>
          <div class="padd12 bor_r center" style="width: 180px">
            <div>{{ props.row.created_at }}</div>
          </div>

          <div class="padd12 bor_r center" style="width: 80px">
            <div></div>
          </div>
          <div class="padd12 bor_r center" style="width: 200px">
            <div></div>
          </div>
          <div class="padd12 center flex_1">
            <div></div>
          </div>
        </div>
      </div>
      <div class="flex justify_between" style="margin-bottom: 10px">
        <div>单证员：</div>
        <div>操作员：</div>
        <div>客户签字：</div>
        <div>货物交付时，如未提出异议，视为完好签收</div>
      </div>
      <div class="flex justify_center">
        <div>(第一联留存联，第二联客户联，第三联提货联)</div>
      </div>
    </div>
    <div style="margin-top: 20px" class="flex justify_end">
      <a-button type="primary" @click="showCount = true">打印</a-button>
    </div>
    <a-modal
      v-model:visible="showCount"
      width="600px"
      title="提示"
      ok-text="打印"
      :footer="false"
    >
      <div class="flex justify_center align_center" style="height: 100px">
        <div>已打印{{ count }}次，确定打印？</div>
      </div>
      <div class="flex justify_end">
        <a-button v-print="printObj" type="primary">打印</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, reactive, onMounted } from "vue";
import predictionDeriverOrder from "@/api/prediction/predictionDeriverOrder";
const props = defineProps({
  row: Object,
  user: Object
});
const count = ref(0);
const showCount = ref(false);
const type = ref("1"); // 1 集装箱   2 整车
const itemList = ref([
  {
    order_no: "5748233",
    name: "玉米",
    number: 2,
    weight: "64.000",
    tiji: "",
    shuohuoren: "四川威斯腾物流有限公司",
    kuwei: "空箱区1-2-4"
  },
  {
    order_no: "",
    name: "",
    number: "",
    weight: "",
    tiji: "",
    shuohuoren: "",
    kuwei: ""
  },
  {
    order_no: "",
    name: "",
    number: "",
    weight: "",
    tiji: "",
    shuohuoren: "",
    kuwei: ""
  }
]);
const printObj = {
  id: "tihuoContent",
  popTitle: "页面打印",
  openCallback: (vue) => {
    predictionDeriverOrder
      .getprintSave({ type: 5, link_id: props.row.id })
      .then((res) => {
        showCount.value = false;
        handlegetCount();
      });
  }
};
const handlegetCount = () => {
  predictionDeriverOrder
    .getCount({ type: 5, link_id: props.row.id })
    .then((res) => {
      console.log(res);
      count.value = res.data.count;
    });
};
onMounted(() => {
  console.log("888888", props.row);
  let box = [];
  let car_nos = [];
  let transport_numbers = [];
  props.row.detail.map((v, i) => {
    box.push(v.prediction.box?.box);
    transport_numbers.push(v.prediction.transport_number);
    car_nos.push(v.prediction.car_type + "-" + v.prediction.car_no);
  });
  props.row.created_at = props.row.created_at.split(" ")[0];
  props.row.boxs = box.join(",");
  props.row.car_nos = car_nos.join(",");
  props.row.transport_numbers = transport_numbers.join("/");
  handlegetCount();
});
</script>

<style lang="less" scoped>
.box {
  width: 218mm;
  height: 140mm;
  padding: 20px 24px;
  box-sizing: border-box;
  position: relative;
}
.logoImg {
  position: absolute;
  top: 20px;
  width: 200px;
}
.border {
  border: 1px solid rgba(0, 0, 0, 1);
}
.bor_r {
  border-right: 1px solid rgba(0, 0, 0, 1);
}
.bor_b {
  border-bottom: 1px solid rgba(0, 0, 0, 1);
}
.padd12 {
  padding: 8px 10px;
  box-sizing: border-box;
}
.text_center {
  text-align: center;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
